<template>
    <!-- 容器 -->
    <div class="min-h-screen">
        <!-- 导航栏 -->
        <header class="flex items-center h-[74px] bg-gray-100 border-b border-gray-200 px-4">
            <a-button type=text @click="onBack">
                <template #icon>
                    <icon-left size="24" :style="{ 'color': '#374751' }" />
                </template>
            </a-button>
            {{ app.name }}
        </header>
        <!-- 内容 -->
        <div class="flex h-[calc(100vh-74px)]">
            <!-- 左侧编排 -->
            <div class="w-2/3 bg-gray-50">
                <header class="flex items-center h-16 border-b border-gray-200 px-7 text-xl text-gray-700">应用编排</header>
                <!-- 编排内容 -->
                <div class="flex h-[calc(100%-64px)]">
                    <div class="flex-1 border-r border-gray-200 p-6">提示词</div>
                    <div class="flex-1 p-6">应用能力</div>
                </div>
            </div>

            <!-- 右侧调试 -->
            <div class="w-1/3 flex flex-col">
                <!-- 导航栏 -->
                <header
                    class="flex items-center flex-shrink-0 h-16 border-b border-gray-200 px-4 text-xl text-gray-700">
                    调试</header>

                <!-- 对话界面 -->
                <div class="h-[calc(100%-64px)] px-6 py-7 overflow-x-hidden overflow-y-scroll scrollbar-y-none">
                    <!-- 消息 -->
                    <div class="flex gap-2 mb-6" v-for="message in messages" :key="message.content">
                        <!-- 用户头像 -->
                        <a-avatar v-if="message.role == 'user'" class="flex-shrink-0" :size="30"
                            :style="{ backgroundColor: '#3370ff' }">
                            <icon-user />
                        </a-avatar>
                        <!-- AI 头像 -->
                        <a-avatar v-else class="flex-shrink-0" :size="30" :style="{ backgroundColor: '#00d0b6' }">
                            <icon-apps />
                        </a-avatar>
                        <!-- 对话内容 -->
                        <div class="flex flex-col gap-2">
                            <div class="font-semibold text-gray-700">{{ message.role == 'user' ? '知多少' : app.name }}
                            </div>
                            <div v-if="message.role == 'user'"
                                class="max-w-max bg-blue-700 text-white border border-blue-800 px-4 py-3 rounded-2xl leading-5">
                                {{ message.content }}
                            </div>
                            <div v-else v-html="marked(message.content)"
                                class="markdown-body max-w-max bg-gray-100 text-gray-900 border border-gray-200 px-4 py-3 rounded-2xl leading-5">
                            </div>
                        </div>
                    </div>

                    <!-- AI 生成中 -->
                    <div v-show="isLoading" class="flex gap-2 mb-6">
                        <!-- 头像 -->
                        <a-avatar class="flex-shrink-0" :size="30" :style="{ backgroundColor: '#00d0b6' }">
                            <icon-apps />
                        </a-avatar>
                        <div class="flex flex-col gap-2">
                            <div class="font-semibold text-gray-700">{{ app.name }}</div>
                            <div
                                class="max-w-max bg-gray-100 text-gray-900 border border-gray-200 px-4 py-3 rounded-2xl leading-5">
                                <icon-loading :style="{ 'color': '#1d4ed8' }" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 对话输入框 -->
                <div class="flex flex-col pt-4">
                    <div class="flex items-center gap-4 px-6">
                        <!-- 清空消息按钮 -->
                        <a-button class="flex-shrink-0" type="test" shape="circle" @click="onClearMessages">
                            <template #icon>
                                <icon-empty size="24" :style="{ 'color': '#374751' }" />
                            </template>
                        </a-button>
                        <div class="h-[50px] flex flex-1 items-center gap-2 px-4 border border-gray-200 rounded-full">
                            <input type="text" class="flex-1 outline-0" v-model="question" @keyup.enter="onSend" />
                            <!-- 文件选择 -->
                            <a-button type="test" shape="circle" @click="onUpload">
                                <template #icon>
                                    <icon-plus-circle size="24" :style="{ 'color': '#374751' }" />
                                </template>
                            </a-button>
                            <!-- 发送按钮 -->
                            <a-button type="test" shape="circle" @click="onSend">
                                <template #icon>
                                    <icon-send size="24" :style="{ 'color': '#1d4ed8' }" />
                                </template>
                            </a-button>
                        </div>
                    </div>
                    <div class="text-center text-gray-500 text-xs py-4">内容由 AI 大模型生成，请仔细甄别</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { appDebug } from '@/service/app'
import message from '@/utils/message'
import router from '@/router'
import { marked } from 'marked'
import 'github-markdown-css'

const question = ref('')
const messages = ref<any>([{
    role: 'ai',
    content: '我是你的日常问题解决助手，我随时为你解答任何疑问。今天有什么可以帮你的吗？'
}])
const isLoading = ref(false)
const route = useRoute()
const app = ref({
    id: '7cc0c69d-7613-4d03-a3f9-6ad03db51e15',
    name: '测试应用',
    modelName: 'chat-gpt-4-turbo-16k',
    icon: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
    createTime: '2024-09-02 17:29:00',
    publishTime: '2024-09-02 18:00:00'
})

// 清空消息
const onClearMessages = () => {
    messages.value = []
}

// 上传文档
const onUpload = () => {
    message.info('开发中，敬请期待！')
}

// 发送
const onSend = async () => {
    if (!check()) return

    const content = question.value
    addMessage('user', content)
    clearInput()

    isLoading.value = true
    const res = await appDebug(route.params.appId as string, content)
    if (res) {
        addMessage('ai', res.data.content)
    }
    isLoading.value = false
}

// 返回上一页
const onBack = () => {
    router.back()
}


// 校验
const check = () => {
    if (!question.value) {
        message.error('问题不能为空')
        return false
    }
    if (isLoading.value) {
        message.info('内容生成中，请稍等~')
        return false
    }
    return true
}

/**
 * 添加消息到消息列表
 * 
 * @param role 角色
 * @param content 内容
 */
const addMessage = (role: string, content: string) => {
    messages.value.push({
        role,
        content
    })
}

// 清空输入框
const clearInput = () => {
    question.value = ''
}
</script>

<style scoped></style>